<!-- 可打单管理 -->
<template>
  <div class="can-order-man">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="20">
        <el-form :label-width="labelWidth" :model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="寄单编号">
            <el-input v-model="formData.jdbh"></el-input>
          </el-form-item>
          <el-form-item label="提单号">
            <el-input v-model="formData.jdbh"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini">查询</el-button>
            <el-button size="mini">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="oper-btns">
      <el-button type="primary" @click="chargeDetails()">打印设备交接单</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table border :data="tableData" height="600px" style="width: 100%">
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="寄单编号">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="提单号">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="提箱凭证">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="进港装箱单">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="车队备注">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="打单状态">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="打印状态">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
    <print-transfer-order-view :visible="printView" @visibleChange="printViewChange"></print-transfer-order-view>
  </div>
</template>

<script>
import PrintTransferOrderView from './dialog/PrintTransferOrderView.vue'
export default {
  components: {
    PrintTransferOrderView
  },
  data () {
    return {
      printView: false,
      labelWidth: '80px',
      formData: {},
      tableData: [],
      currentPage4: 1
    }
  },
  methods: {
    chargeDetails () {
      this.printView = true
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    printViewChange (value) {
      this.printView = value
    }
  }
}
</script>

<style lang="less">
</style>
